<div fxLayout="row" fxLayoutAlign="space-between center" style="margin:20px 5px 10px;">
  <h3 class="mat-subheading-2" fxFlex>
    {{ 'Recent Transactions' | translate }}
  </h3>
  <a mat-stroked-button color="accent" [routerLink]="['/transactions']">{{ 'ViewAll' | translate }}</a>
</div>
<div class="table-container mat-elevation-z1" *ngIf="transactions$ | async as transactions; else loading">
  <div class="table-container mat-elevation-z1">
    <table mat-table [dataSource]="transactions" style="border:none;">
      <ng-container *ngIf="columnHeaders$ | async as columnHeaders">
        <tr mat-header-row *matHeaderRowDef="columnHeaders"></tr>
        <tr mat-row *matRowDef="let row; columns: columnHeaders;"></tr>
      </ng-container>
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>{{ 'Transaction ID' | translate }}</th>
        <td mat-cell *matCellDef="let transaction">
          <a [routerLink]="['/transactions',transaction.block_num,transaction.trx.id]">
            <id-64 [id]="transaction.trx.id"></id-64>
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="block_num">
        <th mat-header-cell *matHeaderCellDef>{{ 'Block Number' | translate }}</th>
        <td mat-cell *matCellDef="let transaction">
          <a [routerLink]="['/blocks',transaction.block_num]">{{transaction.block_num}}</a>
        </td>
      </ng-container>
      <ng-container matColumnDef="cpu">
        <th mat-header-cell *matHeaderCellDef>{{ 'CPU Usage' | translate }}</th>
        <td mat-cell *matCellDef="let transaction">
          {{transaction.cpu_usage_us | number }} µs
        </td>
      </ng-container>
      <ng-container matColumnDef="net">
        <th mat-header-cell *matHeaderCellDef>{{ 'NET Usage' | translate }}</th>
        <td mat-cell *matCellDef="let transaction">
          {{transaction.net_usage_words | toKB | number:'1.0-3'}} KB
        </td>
      </ng-container>
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>{{ 'Actions' | translate }}</th>
        <td mat-cell *matCellDef="let transaction">
          {{transaction.trx.transaction?.actions?.length || 0}}
        </td>
      </ng-container>
    </table>
  </div>
</div>
<ng-template #loading>
  <app-spinner></app-spinner>
</ng-template>
